<template>
	<view>
		<view class="flex a-t j-t" style="margin-top: 30px;">
			<view :class="num[index]==index?'c':''" class="f12" v-for="(item,index) in list.length" style="width: 30px;height: 30px;border-radius: 50%;border: #ccc solid 1px;margin: 0 2px;text-align: center;line-height: 30px;">
				{{index+1}}
			</view>
		</view>
		<view style="box-sizing: border-box;padding: 20px;">
			<view style="margin: 10px 0;">
				{{form.title}}
			</view>
			<view @click="select(index)" :class="n==index?'queslistactive':''" v-for="(item,index) in form.option_json" class="queslist c333" style="margin-bottom: 10px;">
				{{item.title}}.{{item.intro}}
			</view>


			<view>
				<button v-if="!my_subject_id" style="width: 130px;" class="button cfff">换一题</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num:[0],
				list:[],
				index:0,
				form:{},
				n:null,
				arr:[],
				my_subject_id:''
			}
		},
		onLoad(e) {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			});
			if(e.my_subject_id){
				this.my_subject_id=e.my_subject_id
				this.question(e.my_subject_id)
				uni.setNavigationBarTitle({
					title:'答题'
				})
			}else{
				this.gettopic()
			}
		},
		methods: {
			async question(id){
				let data = {
					my_subject_id:id
				}
				let res = await this.$u.apis.question(data)
				this.list=res.questions
				this.form=res.questions[this.index]
			},
		 	async gettopic(){
				let data={
					change:0,
					page:1,
					limit:10
				}
				let res = await this.$u.apis.topic(data)
				this.form=res[this.index]
				this.list=res
			},
			select(e){
				this.n=e
				let data={}
				// this.topic_end(this.form.title,this.form.option_json,e)
				if(this.my_subject_id){

					this.arr.push(e)
				}else{
					let questions={
						title:this.form.title,
						option_json:this.form.option_json,
						right_option:e
					}
					this.arr.push(questions)
				}
				this.index++
				this.form=this.list[this.index]

				if(this.index<this.list.length){
					this.n=null
					this.num.push(this.index)
				}
				if(this.index==this.list.length){
					if(this.my_subject_id){
						data={
							my_subject_id:this.my_subject_id,
							answer_index:this.arr
						}
						this.answer(data)
					}else{
						this.topic_end(this.arr)
					}
				}
			},
			async answer(arr){
			    let self = this;

			    let my_answer = arr.answer_index;
			    let question_list = self.list;
			    let right_answer_num = 0;

                my_answer.forEach(function (item, index) {
                    if(question_list[index]['right_option'] == item){
                        right_answer_num++;
					}
                });
                let right_answer_score = (100/question_list.length)*right_answer_num.toFixed(2);

				this.$u.apis.answer(arr).then(function (res) {
                    uni.showModal({
                        content: '您答对了 '+ right_answer_num +' 题，得分为：' + right_answer_score,
                        success: function (res) {
                            uni.navigateTo({
                                url:'/pages/haoyou/haoyou'
                            })
                        }
                    });
                }).catch(function (res) {
                    uni.showToast({
                        title: res.msg,
                        icon: 'none',
                        duration: 2000
                    });
                });
			},
			async topic_end(arr){
				// let questions={
				// 	title:title,
				// 	option_json:option_json,
				// 	right_option:right_option
				// }
				// let arr=[]
				// arr.push(questions)

				let res = await this.$u.apis.topic_end({questions:arr})
				// return false
				uni.navigateTo({
					url:'./yaoqing?id='+res.id
				})
				// this.index++
				// this.form=this.list[this.index]
				// if(this.index<this.list.length){
				// 	this.n=null
				// 	this.num.push(this.index)
				// }
				// if(this.index==this.list.length){
				// 	uni.navigateTo({
				// 		url:'./yaoqing'
				// 	})
				// }

			}
		}
	}
</script>

<style>
page{
	background: #fff;
}
.queslist{width: 100%;line-height: 36px;border-radius: 30px;border: #ccc solid 1px;color: #666;text-align: center;}
.queslistactive{
	background: rgb(241, 158, 194);
	color: #fff;
	line-height: 36px;border-radius: 30px;border: rgb(241, 158, 194) solid 1px;
}
</style>
